import React, { Component } from "react";
import { NavBar, Carousel,Flex } from "antd-mobile";
import "./index.css";
import Searchinput from "../searchinput/searchinput";
import { withRouter } from "react-router-dom";
import myaxios from "../utils/myaxios"
class Index extends Component {
  state = {
    swiper_list: [],
    imgHeight: 170,
    catitems: [],
    productData:[]
  };
  // 轮播图点击事件
  handleSwiperClick = (goods_id) => {
    this.props.history.push("/gotodDetail/" + goods_id);
  };
    // 分类点击事件
    handlecatitemClick =(params) => {
      this.props.history.push("./cetegroy")
    }
    // 图片里表点击事件
    handleImgClick =(params) => {
      this.props.history.push("/goodList/query='123'")
    }
    
  componentDidMount() {
    // 首页轮播图数据开始
    myaxios
      .get("/home/swiperdata")
      .then((res) => {
        this.setState({
          swiper_list: res
        });
      })
      .catch((err) => console.log(err));
    // 首页轮播图结束
    // 首页分类的数据
    myaxios
      .get("/home/catitems")
      .then((res) => {
        console.log(res)
        this.setState({
          catitems: res
        });
      });
    //图片列表数据
    myaxios.get("/home/floordata")
         .then(res=>{
           console.log(res)
           this.setState({
             productData:res
           })
         })
  }
  render() {
    return (
      <div className="yg-index">
        {/* 首页导航条开始 */}
        <div className="yg-index-nav">
          <NavBar className="yg-index-nav-title">优购商城</NavBar>
        </div>
        {/* 首页导航条结束 */}
        {/* 首页搜索框开始 */}
        <div className="yg-index-search">
          <Searchinput></Searchinput>
        </div>
        {/* 首页搜索框结束 */}
        {/* 首页轮播图的开始 */}
        <div className="yg-index-swiper">
          <Carousel autoplay={true} infinite>
            {this.state.swiper_list.map((val) => (
              <div
                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                key={val.goods_id}
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 首页轮播图的结束 */}
        {/* 首页的分类导航结束 */}
        <div className="yg-index-catitems">
          <div className="catitems-item">
            <Flex>
              {
                this.state.catitems.map(v=>{
                  return     <Flex.Item key={v.image_src} onClick={this.handlecatitemClick}>
                         <img src={v.image_src} alt=""/>
                  </Flex.Item>
                })
              }
            </Flex>
          </div>
        </div>
        {/* 首页的分类导航结束 */}
        {/*首页图片例表开始*/}
         <div className="yg-index-productData">
           {
             this.state.productData.map(v=>{
               return <div key={v.floor_title.image_src} className="productData-item">
                       {/* 标题开始 */}
                        <div className="product-title">
                          <img src={v.floor_title.image_src} alt=""/>
                        </div>
                       {/* 标题结束 */}
                       
                       {/* 图片列表的开始 */}
                        <div className="product-images-list">
                         {
                           v.product_list.map(vv=>{
                              return <div className="product-images-item" key={vv.image_src} onClick={this.handleImgClick}>
                                <img src={vv.image_src} alt=""/>
                              </div>
                           })
                         }

                        </div>
                       {/* 图片列表的结束 */}                       
               </div>
             })
           }
         </div>
        {/*首页图片例表结束*/}

      </div>
    );
  }
}
export default withRouter(Index);
